Class 4 Agenda:

Class 4 Demonstration Labs:

Lecture Demo 1: GitHub, Glitch, Sentinel Hub: orienting to HTML online

Signup at GitHub

Glitch signup/login

GitHub signup option

GitHub authentication process

Sentinel Hub Playground Interface

Download Image Option at Sentinel Hub Playground

Image Dimensions

Image Dimensions

Original Dimensions

50% reduction | note the reduced width and height

Note: if using the Class 4 inclass data, the first image original dimensions are 1975 X 1102; reduction is 987 x 551. The second image original dimensions are 1975 X 1159; reduction is 987 x 579.

Lecture Demo 2 - Adding elements to HTML

Note: this workflow can also be accomplished with our adopted code editor - VS Code. The advantage of Glitch is its ease-of-use; further, for this inclass demonstration lab, a website structure and it’s HTML is conveniently ‘out-of-the-box’, ready for us to revise and use.

Chose Hello Website

Access site structure

Upload Image Assets

Copy image URL

Access index.html

Body section within index.html

 <img src="https://cdn.glitch.com/"
         />

Image Search Position

 <img src="https://cdn.glitch.com/"
          width="" height=""
         />

Addition of width and height modifications

Lecture Demo 3 - Working with HTML elements

Lecture Demo 4 - Incorporating CARTO embed maps

 <iframe src="https://www.example.com" title="text for title"></iframe>

Secure CARTO embed code for 1 map